<template>
  <div class="main ">
    <div class="searchTime c-shadow">
      <div class="timeRange">
          <span style="margin-right:10px;">时间范围:</span>
          <j-date-picker v-model="dateStart" :max="maxTime" @change="dateChange()"></j-date-picker>
          <span style="margin:0 10px;">至</span>
          <j-date-picker v-model="dateEnd" :min="dateStart" :max="curTime" @change="dateChange()"></j-date-picker>
          <el-button style="margin-left:30px;" type="primary" class="btn-search" @click="search()">确定</el-button>
          <el-button type="primary" plain class="btn-reset" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="chartsShow c-shadow">
      <p class="total">黑名单企业总量:<span class="totalNum">{{total}}家</span></p>
      <div class="graphChart">
        <p class="title">黑名单数量趋势图</p>
      </div>
      <div class="pieChart">
        <p class="title">区域分布</p>
      </div>
      <div class="pieChart">
        <p class="title">列入黑名单原因分布</p>
      </div>
      <div class="pieChart">
        <p class="title">列入黑名单年限分布</p>
      </div>
      <div class="pieChart">
        <p class="title">注册资金分布</p>
      </div>
      <div class="pieChart">
        <p class="title">成立时间分布</p>
      </div>
      <div class="barChart">
        <p class="title">行业分布</p>
      </div>
    </div>
  </div>
</template>
<script>
import { jDatePicker } from '../../components'
// import { PieCharts } from '../../assets/js/chart/pieChart'
// import { LineBarChart } from '../../assets/js/chart/lineBarChart'
// import { GraphChart } from '../../assets/js/chart/graphChart'
// import { Code } from '../../assets/js/operaCode'
// import html2canvas from 'html2canvas'
export default {
  name: 'analysis',
  components: { jDatePicker },
  data() {
    return {
      dateStart: '',
      dateEnd: '',
      total: 0
    }
  },
  computed: {
    maxTime() {
      if ((new Date().valueOf() - new Date(this.dateEnd).valueOf()) > 0) {
        return this.dateEnd
      } else {
        return this.curTime
      }
    },
    curTime() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() > 9 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
      let day = date.getDate() > 9 ? date.getDate() : ('0' + date.getDate())
      return year + '-' + month + '-' + day
    },
    globalParams() {
      let params = {}
      if (this.dateStart !== '') {
        params['startTime'] = this.dateStart
      }
      if (this.dateEnd !== '') {
        params['endTime'] = this.dateEnd
      }
      return params
    }
  },
  methods: {
    dateChange() {

      this.countTrend(this.globalParams)
      this.areaDistributing(this.globalParams)
      this.reasonDistributing(this.globalParams)
      this.TimeDistributing(this.globalParams)
      this.moneyDistributing(this.globalParams)
      this.foundingDistributing(this.globalParams)
      this.industryDistributing(this.globalParams)
    },
    countTrend() {
      // 数量趋势

    },
    areaDistributing() {
      // 区域分布
    },
    reasonDistributing() {
      // 列入原因分布
    },
    TimeDistributing() {
      // 列入年限分布
    },
    moneyDistributing() {
      // 注册资金分布
    },
    foundingDistributing() {
      // 成立时间分布
    },
    industryDistributing() {
      // 行业分布
    },
    search() {
      let params = {
        dateStart: this.dateStart,
        dateEnd: this.dateEnd
      }
      console.log(params)
    },
    reset() {
      this.dateStart = ''
      this.dateEnd = ''
      this.search()
    }
  },
  mounted() {
    this.countTrend(this.globalParams)
    this.areaDistributing(this.globalParams)
    this.reasonDistributing(this.globalParams)
    this.TimeDistributing(this.globalParams)
    this.moneyDistributing(this.globalParams)
    this.foundingDistributing(this.globalParams)
    this.industryDistributing(this.globalParams)
  }
}
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size: 14px;
    .searchTime {
      width: 100%;
      height: 100px;
      .timeRange {
        width: 100%;
        height: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center
      }
    }

    

    .chartsShow {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px 20px 20px;
      margin-top: 20px;
      box-sizing: border-box;
      .total {
        width:100%;
        height:40px;
        font-size: 14px;
        line-height: 40px;
        margin-top: 20px;
        padding: 0 20px;
        box-sizing: border-box;
        .totalNum {
          font-size: 20px;
          color: orange;
          margin-left:15px;
        }
      }
      .graphChart {
        width: 100%;
        height: 400px;
        display: flex;
        .title {
          width: 100%;
          height: 26px;
          font-size: 14px;
          font-weight:700;
          text-align: center;
          line-height: 26px;
          padding: 10px 0;
        }
      }
      .pieChart , .barChart {
        width:50%;
        height: 400px;
        display: flex;
        .title {
          width: 100%;
          height: 26px;
          font-size: 14px;
          font-weight:700;
          text-align: center;
          line-height: 26px;
          padding: 10px 0;
        }
      }
    }
}
</style>



// WEBPACK FOOTER //
// src/view/blacklist/analysis.vue